<script setup>
	import { computed, ref, watch } from 'vue'
	import { message } from 'ant-design-vue'
	import dataConnectorApi from '@/views/plugin/dashboard/api/dataConnectorApi'

	const props = defineProps({
		modelValue: {
			type: Object,
			default: () => ({
				params: 'useSSL=false&serverTimezone=Asia/Shanghai',
				url: ''
			})
		}
	})

	const emit = defineEmits(['update:modelValue', 'change'])

	// 表单引用
	const formRef = ref()

	// 计算MySQL URL
	const mysqlUrl = computed(() => {
		const { host, port, database, params } = props.modelValue
		if (!host || !port || !database) return ''
		let url = `jdbc:mysql://${host}:${port}/${database}`

		if (params) {
			url += `?${params}`
		}
		return url
	})

	// 监听mysqlUrl变化并同步到config.url
	const updateUrl = (newValue) => {
		const updatedValue = { ...props.modelValue, url: newValue }
		emit('update:modelValue', updatedValue)
		emit('change', updatedValue)
	}

	// 测试MySQL连接
	const testMySQLConnection = () => {
		if (
			!props.modelValue.host ||
			!props.modelValue.port ||
			!props.modelValue.database ||
			!props.modelValue.username ||
			!props.modelValue.password
		) {
			message.warning('请填写完整的MySQL连接信息')
			return
		}
		dataConnectorApi
			.testConnection({ type: 'MYSQL', config: props.modelValue })
			.then(() => {
				message.success('连接测试成功')
			})
			.catch(() => {
				message.error('连接测试失败')
			})
	}

	// 监听URL变化
	watch(mysqlUrl, updateUrl)

	// 监听配置变化
	watch(
		() => props.modelValue,
		(newValue) => {
			emit('change', newValue)
		},
		{ deep: true }
	)

	// 表单校验方法
	const validate = () => {
		return formRef.value.validate()
	}

	// 重置表单方法
	const resetFields = () => {
		formRef.value.resetFields()
	}

	// 暴露方法给父组件
	defineExpose({
		validate,
		resetFields
	})
</script>

<template>
	<a-form ref="formRef" :model="modelValue" layout="vertical">
		<a-row :gutter="16">
			<a-col :span="12">
				<a-form-item label="主机地址" name="host" :rules="[{ required: true, message: '请输入主机地址' }]">
					<a-input v-model:value="modelValue.host" placeholder="localhost" />
				</a-form-item>
			</a-col>
			<a-col :span="12">
				<a-form-item label="端口" name="port" :rules="[{ required: true, message: '请输入端口' }]">
					<a-input v-model:value="modelValue.port" placeholder="3306" />
				</a-form-item>
			</a-col>
			<a-col :span="12">
				<a-form-item label="数据库" name="database" :rules="[{ required: true, message: '请输入数据库' }]">
					<a-input v-model:value="modelValue.database" placeholder="test_db" />
				</a-form-item>
			</a-col>
			<a-col :span="12">
				<a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
					<a-input v-model:value="modelValue.username" placeholder="请输入用户名" />
				</a-form-item>
			</a-col>
			<a-col :span="12">
				<a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]">
					<a-input-password v-model:value="modelValue.password" autocomplete placeholder="请输入密码" />
				</a-form-item>
			</a-col>
			<a-col :span="24">
				<a-form-item label="连接参数" name="params">
					<a-input v-model:value="modelValue.params" placeholder="useSSL=false&serverTimezone=Asia/Shanghai" />
				</a-form-item>
			</a-col>
			<a-col :span="24">
				<a-form-item label="URL" name="url">
					<a-textarea :value="mysqlUrl" :rows="3" readonly />
				</a-form-item>
			</a-col>
		</a-row>
	</a-form>
</template>
